<template>
  <NstdBizTree
          :data="dataSource"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          label="name"
          :searchShow="true"
          :leftIconShow="true"
          :imgSrc="file"
          :btnShow="true"
          btnType="text"
          :btnList="btnList"
          @handleOperation="handleOperation"
          @handleNodeClick="handleNodeClick"
  >
  </NstdBizTree>
</template>

<script setup>
  import file from './file.png'
  import { ref } from 'vue'
  const btnList = [
    {
      type: 'text',
      icon: '删除',
      size: 20,
      color: '#FF5252'
    }
  ]
  const dataSource = ref([
    {
      id: 1,
      name: 'Level one 1',
      children: [
        {
          id: 4,
          name: 'Level two 1-1',
          children: [
            {
              id: 9,
              name: 'Level three 1-1-1',
            },
            {
              id: 10,
              name: 'Level three 1-1-2',
            },
          ],
        },
      ],
    }
  ])
  const handleOperation = (item, data) => {
    data.edit = true
  }
  const handleNodeClick = data => {}
</script>

<style scoped>
  :deep(.custom-tree-node) {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
